<template>
  <div>
    <div class="top">
      <div id="components-form-demo-advanced-search">
        <a-row :gutter="24" style="margin-bottom: 15px">
          <a-col :span="6">
            <div class="label">客户编号：</div>
            <a-select
              show-search
              option-filter-prop="children"
              style="width: 60%"
              :filter-option="filterOption"
              v-model="searchData.tenantId"
            >
              <a-select-option
                :value="item.tenantId"
                v-for="item in accArray"
                :key="item.id"
                :titles="item.title"
              >
                {{ item.companyName + "/" + item.tenantId }}
              </a-select-option>
            </a-select>
          </a-col>
          <a-col :span="6">
            <div class="label">客户邮箱：</div>
            <a-input :maxLength="128" v-model="searchData.emailAccount" />
          </a-col>
          <a-col :span="6">
            <div class="label">选择时间：</div>
            <a-range-picker
              style="width: 60%"
              :placeholder="['年/月/日', '年/月/日']"
              format="YYYY-MM-DD"
              v-model="dateTime"
              @change="DateChange"
            />
          </a-col>
          <a-col>
            <a-button type="primary" class="top-btn" @click="searchBtn">
              查询
            </a-button>
            <a-button
              type="primary"
              class="top-btn"
              style="margin-left: 10px"
              @click="resetBtn"
            >
              重置
            </a-button>
          </a-col>
        </a-row>
      </div>
    </div>
    <div>
      <a-button type="primary" class="top-btn frebtn" @click="importBill">
        导出
      </a-button>
    </div>
    <a-spin tip="Loading..." :spinning="spinning">
      <a-table
        :rowKey="(record, index) => index"
        :data-source="tableData"
        :pagination="false"
      >
        <!-- 客户编号 -->
        <a-table-column
          key="tenantId"
          data-index="tenantId"
          width="7%"
          align="center"
        >
          <span slot="title">客户编号</span>
          <template slot-scope="text, record">
            {{ record.tenantId }}
          </template>
        </a-table-column>
        <!-- 客户邮箱 -->
        <a-table-column
          width="8%"
          key="emailAccount"
          data-index="emailAccount"
          align="center"
        >
          <span slot="title">客户邮箱</span>
          <template slot-scope="text, record">
            {{ record.emailAccount }}
          </template>
        </a-table-column>
        <!-- 公司名称 -->
        <a-table-column
          width="9%"
          key="companyName"
          data-index="companyName"
          align="center"
        >
          <span slot="title">公司名称</span>
          <template slot-scope="text, record">
            <span>{{ record.companyName }}</span>
          </template>
        </a-table-column>
        <!-- 人民币余额 -->
        <a-table-column
          key="balanceRmb"
          width="7%"
          data-index="balanceRmb"
          align="center"
        >
          <span slot="title">人民币余额</span>
          <template slot-scope="text, record">
            <span :style="record.balanceRmb * 1 < 0 ? 'color:#f00' : ''">{{
              record.balanceRmb
            }}</span>
          </template>
        </a-table-column>
        <!-- 美元余额 -->
        <a-table-column
          key="balanceUsd"
          data-index="balanceUsd"
          align="center"
          width="7%"
        >
          <span slot="title">美元余额</span>
          <template slot-scope="text, record">
            <span :style="record.balanceUsd * 1 < 0 ? 'color:#f00' : ''">{{
              record.balanceUsd
            }}</span>
          </template>
        </a-table-column>
        <!-- 欧元余额 -->
        <a-table-column
          width="9%"
          key="balanceEur"
          data-index="balanceEur"
          align="center"
        >
          <span slot="title">欧元余额</span>
          <template slot-scope="text, record">
            <span :style="record.balanceEur * 1 < 0 ? 'color:#f00' : ''">{{
              record.balanceEur
            }}</span>
          </template>
        </a-table-column>
        <!-- 英镑余额 -->
        <a-table-column
          key="balanceGbp"
          width="7%"
          data-index="balanceGbp"
          align="center"
        >
          <span slot="title">英镑余额</span>
          <template slot-scope="text, record">
            <span :style="record.balanceGbp * 1 < 0 ? 'color:#f00' : ''">{{
              record.balanceGbp
            }}</span>
          </template>
        </a-table-column>
        <!-- 信用余额
        <a-table-column
          width="7%"
          key="remarksx"
          data-index="remarksx"
          align="center"
        >
          <span slot="title">信用余额(USD)</span>
          <template slot-scope="text, record">
            <span :style="record.balanceEur * 1 < 0 ? 'color:#f00' : ''">{{
              record.remarksx
            }}</span>
          </template>
        </a-table-column> -->
        <!-- 账单生成日期  -->
        <a-table-column
          key="createdTime"
          data-index="createdTime"
          width="9%"
          align="center"
        >
          <span slot="title">账单生成日期</span>
          <template slot-scope="text, record">
            <span>{{ record.createdTime || "无" }}</span>
          </template>
        </a-table-column>

        <!-- 操作 -->
        <a-table-column key="action" align="center" width="15%">
          <span slot="title">操作</span>
          <span class="action" slot-scope="text, record">
            <a
              href="javascript:;"
              @click="createBill(record)"
              style="color: #0000bf; border-bottom: 1px solid #0000bf"
              >生成账单</a
            >
            <a
              href="javascript:;"
              @click="goBillList(record)"
              style="
                color: #0000bf;
                border-bottom: 1px solid #0000bf;
                margin-left: 10px;
              "
            >
              账单列表
            </a>
            <a
              href="javascript:;"
              @click="goTransList(record)"
              style="
                margin-left: 10px;
                color: #0000bf;
                border-bottom: 1px solid #0000bf;
              "
              >交易明细</a
            >
            <!-- <a
              href="javascript:;"
              @click="showModal(record)"
              style="
                color: #0000bf;
                border-bottom: 1px solid #0000bf;
                margin-left: 10px;
              "
            >
              记账
            </a> -->
          </span>
        </a-table-column>
      </a-table>
    </a-spin>
    <!-- 分页器 -->
    <div style="margin: 20px 0; text-align: center">
      <a-config-provider>
        <a-pagination
          show-size-changer
          :pageSizeOptions="['10', '20', '30']"
          :show-total="
            (total) => `${$t('m.page.Total')} ${total} ${$t('m.page.items')}`
          "
          @showSizeChange="showChange"
          :buildOptionText="
            (props) => ` ${props.value} ${$t('m.page.a')}/${$t('m.page.page')}`
          "
          show-quick-jumper
          :default-current="searchData.current"
          :total="total"
          @change="onChangePage"
        />
      </a-config-provider>
    </div>
    <CreateBillModal />
  </div>
</template>

<script>
import { mapState } from "vuex";
import CreateBillModal from "./CreateBillModal";
import {
  clientBill_selcetList,
  clientBill_exportFile,
} from "@/apis/system/FinanceManagement/clientBill";
import req from "@/utils/req";
export default {
  components: {
    CreateBillModal,
  },
  created() {
    this.getCBillTableList();
  },

  data() {
    return {
      spinning: false,
      dateTime: [],
      tableData: [],
      total: 5,
      searchData: {
        startTimeValue: null,
        endTimeValue: null,
        current: 1,
        size: 10,
        tenantId: null,
        emailAccount: null,
      },
    };
  },
  methods: {
    //帐单列表
    goBillList(record) {
      setTimeout(() => {
        this.$emit("goBillList", record);
      }, 50);
    },
    //交易明细
    goTransList(record) {
      setTimeout(() => {
        this.$emit("goTransList", record);
      }, 50);
    },
    //生成账单
    createBill(record) {
      setTimeout(() => {
        this.$bus.$emit("createBill", record);
      }, 50);
    },
    //导入按钮
    async importBill() {
      let res = await clientBill_exportFile(this.searchData);
      if (res) {
        req.exportFile("客户账单列表", res);
      }
    },
    //查询接口
    searchBtn() {
      this.getCBillTableList();
    },
    //分页器事件
    onChangePage(pageNumber) {
      this.searchData.current = pageNumber;
      this.getCBillTableList();
    },
    //页码变更
    showChange(current, size) {
      this.searchData.current = current;
      this.searchData.size = size;
      this.getCBillTableList();
    },
    //重置按钮
    resetBtn() {
      this.dateTime = [];
      this.searchData.tenantId = null;
      this.searchData.emailAccount = null;
      this.searchData.startTimeValue = null;
      this.searchData.endTimeValue = null;
      this.getCBillTableList();
    },
    //搜索日期选择器
    DateChange(date, dateString) {
      date;
      console.log(dateString);
      if (dateString && dateString.length > 0 && dateString[0] != "") {
        this.searchData.startTimeValue = `${dateString[0]} 00:00:00`; //年月日后面必须要有个空格
        this.searchData.endTimeValue = `${dateString[1]} 23:59:59`; //年月日后面必须要有个空格
      } else {
        this.searchData.startTimeValue = null;
        this.searchData.endTimeValue = null;
      }
    },
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      );
    },

    // 获取表格数据
    async getCBillTableList() {
      this.spinning = true;
      let { code, responseBody } = await clientBill_selcetList(this.searchData);
      if (code === "200") {
        this.total = responseBody.total * 1;
        this.tableData = responseBody.records;
        this.spinning = false;
      }
    },
  },
  computed: {
    ...mapState(["accArray"]),
  },
};
</script>

<style lang="less" scoped>
.remarks-item {
  display: flex;
  align-items: center;
  .ant-input {
    margin-right: 5px;
    height: 30px;
  }
}
.action {
  span {
    margin: 0 5px 0 0;
  }
}
#components-form-demo-advanced-search {
  padding: 5px;
  input {
    width: 60%;
  }
  .ant-col {
    display: flex;
    align-items: center;
    .label {
      width: 100px;
      text-align: right;
    }
  }
}
.top-btn {
  background: #fff;
  color: #3eae7c;
  text-shadow: none;
}
.top-btn:hover {
  background: #3eae7c;
  color: #fff;
}
.frebtn {
  background-color: #66b1ff;
  color: #fff;
  border: #66b1ff;
}
.frebtn:hover {
  background-color: #66b1ff;
  color: #fff;
  border: #66b1ff;
}
</style>
